<template>
  <HomePannel title="热门品牌" subTitle="国际经典 品质保证" class="home-pannel">
    <template #right>
        <a @click="toggle(-1)" :class="{disabled:index===0}" href="javascript:;" class="iconfont  icon-angle-left prev"></a>
        <a @click="toggle(1)" :class="{disabled:index===1}"  href="javascript:;" class="iconfont icon-angle-right next" ></a>
    </template>
    <template #main>
        <div class="home-brand">
            <ul class="brand-list" :style="{transform:`translateX(${-index*1240}px)`}">
                <li v-for="item in brandlist" :key="item.id">
                    <router-link to="/">
                        <img v-lazy="item.picture" alt="">
                    </router-link>
                </li>
            </ul>
        </div>
    </template>
  </HomePannel>
</template>

<script>
import HomePannel from './HomePannel.vue'
import { getBrandAPI } from '@/api/home'
import { ref } from 'vue'
export default {
  components: {
    HomePannel
  },
  setup () {
    const brandlist = ref([])
    // 获取数据
    getBrandAPI().then(data => {
    //   console.log(data)
      brandlist.value = data.result
    })

    // 切换效果
    const index = ref(0)
    const toggle = (step) => {
      const newIndex = index.value + step
      if (newIndex < 0 || newIndex > 1) return
      index.value = newIndex
    }
    return { brandlist, toggle, index }
  }
}
</script>

<style lang="less" scoped>
.home-pannel{
    background: #f5f5f5;
}
.iconfont{
    width: 20px;
    height: 20px;
    background: #ccc;
    color:#fff;
    display: inline-block;
    text-align: center;
    margin-left: 5px;
    background: @themeColor;
    &::before{
        font-size: 12px;
        position: relative;
        top: -2px;
    }
    &.disabled{
        background: #ccc;
        cursor: not-allowed;
    }
}
.home-brand{
    display: flex;
    width: 100%;
    height: 345px;
    overflow: hidden;
    padding-bottom: 40px;
    .brand-list{
        width: 200%;
        display: flex;
        transition: all 1s;
        li{
            width: 240px;
            margin-right: 10px;
            &:nth-child(5n){
                margin-right: 0;
            }
            img{
                width: 100%;
                height: 305px;
            }
    }
    }
}
</style>
